<template>
  <view class="bar"></view>

  <view>
    <u-navbar
        @leftClick="back()"
        title="修改密码"
        :autoBack="true"
        :placeholder="true"
    ></u-navbar>

    <view style="margin: 15rpx">
      <u--form
          labelPosition="left"
          :model="info"
          ref="formInfo"
      >
        <u-form-item
            prop="oldPassword"
            borderBottom
            ref="item1"
        >
          <u-input
              v-model="info.oldPassword"
              placeholder="原密码"
          ></u-input>
        </u-form-item>
        <u-form-item
            prop="newPassword"
            borderBottom
            ref="item2"
        >
          <u-input
              v-model="info.newPassword"
              placeholder="新密码"
          ></u-input>
        </u-form-item>
      </u--form>
      <up-button type="primary" @click="save()" text="确定"></up-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {reqModifyPassword} from "@/api/user";

const info = ref({
  oldPassword: '',
  newPassword: '',
})

const formInfo = ref()

onMounted(() => {
  formInfo.value.setRules(rules)
})

const save = () => {
  formInfo.value.validate().then(async (res: any) => {
    if (res) {
      await reqModifyPassword(info.value).then((res: any) => {
        if (res.code == 200) {
          uni.showToast({
            title: '修改成功',
            icon: 'success'
          })
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            })
          }, 1000)
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'error'
          })
        }
      })
    }
  })
}

const rules = ({
  'oldPassword': {
    type: 'string',
    required: true,
    message: '请填写原密码',
    trigger: ['blur']
  },
  'newPassword': {
    type: 'string',
    required: true,
    message: '请选择新密码',
    trigger: ['blur']
  }
})

const back = () => {
  uni.redirectTo({
    url: '/pages/user/setting/setting'
  })
}
</script>


<style scoped lang="scss">

</style>
